<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"   
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
	<h:outputScript name="js/jquery-2.1.1.min.js"></h:outputScript>
	<h:outputScript name="static/blowup/blowup.min.js"></h:outputScript>	
	<h:outputScript name="js/imageRotate/jquery.rotate.min.js"></h:outputScript>
	
	<script type="text/javascript">
		var degree = 0
		$(document).ready(function () {

			$(".demo-img").blowup({
				background : "#FCEBB6",
				round: false,
				'width': 400,
				'height': 200,
				scale: 4
			});
			$(".demo-img").rotate({ 
				   bind: 
				     { 
				        click: function(){
				        	degree +=90;
				            $(this).rotate({ animateTo:degree});
				        }
				     } 
			});
		})
		function rotateImg(){
			$(".demo-img").rotate({ 
			     animateTo:degree, 
			});	
		}
	</script>
	<style type="text/css">
		.viewLink{
			border: 1px solid #c5dbec;
		    background: #dfeffc url(/onlineExchange-web/javax.faces.resource/images/ui-bg_glass_85_dfeffc_1x400.png.xhtml?ln=primefaces-redmond) 50% 50% repeat-x;
		    font-weight: bold;
		    color: #2e6e9e;
			display: block;
    		line-height: normal
		}
	
	</style>
</h:head>
<h:body>
		<h:form>
		
			<p:button outcome="/public/displayImage.xhtml" target="_blank" style="margin:5px;" value="查看原图">
				<f:param name="id" value="#{param.id}" />
			</p:button>
			<ui:remove><p:link outcome="/public/displayImage.xhtml" target="_blank" style="margin:auto 5px;" ></p:link></ui:remove>
			<div id="img">
				<p:graphicImage styleClass="demo-img pos-center " width="400" height="400" value="#{images.image}" >
				    <f:param name="id" value="#{param.id}" />
				</p:graphicImage>
			</div>
			
		</h:form>
	
</h:body>
</ui:composition>